<template lang="pug">
  .login
    .echarts-global
    .login-form
      .title
      .ant-input-affix-wrapper
      .login-icon
      .ant-input-password-icon

</template>

<script>
  import 'echarts/map/js/world.js'
  import 'echarts-gl'

  // import earth from "@/assets/images/earth.jpg";
  // import earthHigh from "@/assets/images/earth-high.jpg";
  // import universe from "@/assets/images/universe.jpg";

  export default {
    name: "Login",
    mounted() {
      this.$nextTick(() => {
        setTimeout(()=>{
          this.initChart();
        }, 100)
      });


    },
    methods:{
      initChart() {
        let dom = document.getElementsByClassName('echarts-global')[0];
        const myChart = this.$echarts.init(dom);
        let option = {
          backgroundColor: '#000',
          globe: {
            globeRadius:60,
            baseTexture: require("../assets/images/earth.jpg"),
            heightTexture: require("../assets/images/earth-high.jpg"),
            displacementScale: 0.07,
            shading: "lambert",
            environment: require("../assets/images/universe.jpg"),
            realisticMaterial: {
              roughness: 0.8
            },
            postEffect: {
              enable: true
            },
            light: {
              ambient: {
                color: "#fff",
                intensity: 0.6,
              },
              main: {
                intensity: 0.6,
                shadow: true,
              },
            },
          }

        };

        myChart.setOption(option,true)
      },

    },
  }
</script>

<style lang="stylus" scoped>
  .login
    width 100%
    height 100%
    .echarts-global
      width 100%
      height 100%


    .login-form {
      position: absolute;
      width: 320px;
      right: 100px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 5px;
      background-color: rgba(30, 148, 255, 0.1);
      box-shadow: 0 0 10px rgba(30, 148, 255, 1);
      padding: 20px;
      padding-bottom: 0;
      .title {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px;
        font-weight: bold;
        text-align: center;
        color: @primary-color;

        text-shadow: 0 0 5px rgba(30, 148, 255, 0.6);
      }
      .ant-input-affix-wrapper {
        background-color: transparent !important;
        border: 1px solid @primary-color;
        input.ant-input {
          background-color: transparent !important;
          color: @primary-color;
        }
      }
      .login-icon {
        color: @primary-color;
      }
      .ant-input-password-icon {
        color: @primary-color;
      }
    }

</style>
